<template>
  <div class="wrapper">
    <div>
      <Select>
        <!-- 收藏 -->
        <template v-slot:love>
          <div class="love">
            <span><img src="../assets/images/星星.png" alt="" /></span>
            <span>收藏</span>
            <span>({{ $store.state.select_acchor_data.subCount }})</span>
          </div>
        </template>

        <!-- 歌手 -->
        <template
          v-slot:tags
          v-if="$store.state.select_acchor_data.artists ? true : false"
        >
          <div class="tags">
            <span class="tag_title">歌手 : </span>
            <span
              class="tag_item tag_name"
              v-for="(item, index) in $store.state.select_acchor_data.artists"
              :key="index"
              @click=" gosingerDetails(item)"
            >
              {{ item.name }}
            </span>
          </div>
        </template>

        <!-- 时间-->
        <template v-slot:time>
          <div class="time" style="margin-top: 10px; color: #666">
            <span>时间 : </span>
            <span>{{ $store.state.select_acchor_data.publishTime }}</span>
          </div>
        </template>
      </Select>
    </div>
    <!-- loading加载 -->
    <div v-if="loading">
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 1)"
        style="width: 100%; height: 200px"
      >
      </el-table>
    </div>

    <!-- 内容区 -->
    <div class="content">
      <!-- tab位置 -->
      <div class="tab">
        <div
          class="music_tab"
          :class="index == select_tab ? 'active' : ''"
          v-for="(item, index) in tab"
          :key="index"
          @click="select_tab_fn(index)"
        >
          {{ item }}
        </div>
        <!-- <div class="details_tab">专辑详情</div> -->
      </div>
      <!-- 音乐列表位置 -->
      <div class="songlist" v-if="select_tab === 0">
        <div class="songlist_title">
          <div class="name">音乐标题</div>
          <div class="song_name">歌手</div>
          <div class="songs">专辑</div>
          <div class="play_time">时长</div>
        </div>

        <div class="music">
          <div
            class="songlist"
            :class="item.id === $store.state.src_id ? 'active' : ''"
            v-for="(item, index) in $store.state.select_acchor_data
              .all_album_music"
            :key="index"
            @click="play_music(item)"
          >
            <!-- :class="$store.state.src_id === item.id ? 'active' : ''" -->
            <!-- 序号 -->
            <div class="index_name">
              <!-- 下标 -->
              <div class="index">{{ index + 1 }}</div>
              <!-- 音乐标题 -->
              <div class="name">
                <span>{{ item.name }}</span>
                <span class="name_wenzi" v-if="item.alia[0]"
                  >({{ item.alia[0] }})</span
                >
              </div>
            </div>
            <!-- 歌手名字 -->
            <div class="song_name">{{ item.ar[0].name }}</div>
            <!-- 专辑 -->
            <div class="songs">{{ item.al.name }}</div>
            <!-- 时长 -->
            <div class="play_time">{{ item.dt }}</div>
          </div>
        </div>
      </div>
      <!-- 歌手描述  歌手详情 -->
      <div v-if="select_tab === 1">2</div>
    </div>
  </div>
</template>

<script>
import Select from "../components/Select.vue";
export default {
  name: "Zjdetails",
  components: {
    Select,
  },
  data() {
    return {
      // 等待加载
      loading: true,
      //   tab
      tab: ["音乐列表"],
      //   选择tab
      select_tab: 0,
    };
  },
  mounted() {
    this.loading = false;
  },
  methods: {
    // 选择 歌曲列表  专辑详情
    select_tab_fn(index, item) {
      this.select_tab = index;
      //   1  代表歌手的描述
      if (index === 1) {
        this.tab_singer_details();
      }
    },

    // tab歌手详情  歌手的描述 "/artist/desc"
    tab_singer_details() {
      this.axios({
        method: "get",
        url: "/artist/desc",
        params: {
          id: 6452,
        },
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 点击播放
    play_music(item) {
      let play_info = {
        picUrl: "",
        name: "",
        playTime: "",
        song: {
          alias: [],
          artists: [{ name: "" }],
        },
        id: "",
        type: "singer_music",
      };
      //   图片路劲
      play_info.picUrl = item.al.picUrl;
      //   音乐名称层
      play_info.name = item.name;
      //   播放时间
      play_info.playTime = item.playtime;
      //   播放时间  毫秒形式
      play_info.playTimeS = item.dt;
      //
      play_info.song.alias = "";
      //   歌手名称
      play_info.song.artists[0].name = item.ar[0].name;
      //   音乐的id
      play_info.id = item.id;

      this.$store.commit("musis_info", play_info);
      this.$store.commit("play_list", play_info);
      this.$store.commit("src_id", play_info.id);
      this.$store.dispatch("get_src");

      console.log("item", item);
      console.log(this.$store.state.musis_info);
    },


  },
};
</script>

<style lang="less" scoped>
.wrapper {
  overflow-y: auto;
  height: 670px;
  width: 1000px;
}
.content {
  .tab {
    display: flex;
    font-size: 18px;
    margin-top: 20px;
    height: 30px;
    div {
      display: inline-block;
      cursor: pointer;
      color: #666;
      &:hover {
        color: black;
      }
    }
    .music_tab {
      margin-right: 30px;
    }
    .active {
      border-bottom: 3px solid #e4393c;
      color: black;
      font-weight: bold;
    }
  }
  .songlist {
    .songlist_title {
      display: flex;
      text-align: inherit;
      color: #555;
      padding: 10px 0;
      div {
        cursor: default;
      }
      //   background: brown;
      .name {
        flex: 0 50%;
        // background: cornflowerblue;
        padding-left: 100px;
        box-sizing: border-box;
      }
      .song_name {
        flex: 0 15%;
        // background: cornsilk;
      }
      .songs {
        flex: 0 25%;
      }
      .play_time {
        flex: 0 10%;
        // background: crimson;
      }
    }
    // 音乐
    .music {
      .active {
        color: #e4393c !important;
      }
      .songlist {
        padding: 10px 0;
        cursor: default;
        display: flex;
        color: #555;

        .index_name {
          display: flex;
          flex: 0 50%;
          //   background: cornflowerblue;
          box-sizing: border-box;
          .index {
            flex: 0 20%;
            // background: cadetblue;
            text-align: center;
          }
          .name {
            width: 400px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .name_wenzi {
              color: #999;
            }
          }
        }
        .song_name {
          // flex: 0 15%;
          width: 145px;
          //   background: cornsilk;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &:hover {
            color: #333;
            cursor: pointer;
          }
        }
        .songs {
          // flex: 0 25%;
          width: 260px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:hover {
            cursor: pointer;
            color: #333;
          }
        }
        .play_time {
          flex: 0 10%;
          box-sizing: border-box;
          padding-left: 10px;
        }
        &:nth-child(2n-1) {
          background: #f0f0f0;
        }
        &:hover {
          background: #9999;
        }
      }
    }
  }
}
</style>